<template>
  <div class="box">
    <h4>
      <a></a>
      <span>用户中心</span>
      <a class="el-icon-more" @click="changeme"></a>
    </h4>
    <!-- 头像区域 -->
    <div class="box_c">
      <div class="profile">
        <p class="profile_left">
          <el-upload
            class="avatar-uploader"
            action="/api/user/changheader"
            :data="{ id: this.uid }"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            disabled
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </p>

        <span class="nickname profile_right">
          {{ nickname }}
        </span>

      </div>
      <!-- 主体部分 -->
      <div class="box_list">
        <p>
          <span class="user">
          性别：{{ sex }}
        </span>
        </p>

        <p @click="run" class="user">管理文章</p>
        <p class="user">
          <span @click="xgmm">修改密码</span>
        </p>
      </div>

      <div class="buttom">
        <a @click="quitbtn" class="retlogin">退出登录</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "",
      imageUrl: "",
      username: "",
      nickname: "",
      email: "",
      sex: "",
      uid: this.$jwt(localStorage.getItem("User-Token")).uid,
    };
  },
  methods: {
    xgmm() {
      this.$router.push({
        path: '/me/changepassword'
      })
    },
    // 跳转文章管理
    run() {
      this.$router.push({
        path: "/run",
      });
    },
    
    changeme() {
      this.$router.push({
        path: '/changeme'
      })
    },
    // 退出登录
    quitbtn() {
      localStorage.removeItem("User-Token");
      this.$router.push({
        path: "/login",
      });
    },
    handleAvatarSuccess(res) {
      if (res.code == 200) {
        this.imageUrl = "http://test.com:3000/image/" + res.url;
      } else {
        this.$message.error({
          message: '头像更换失败',
        })
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  mounted() {
    this.$http
      .get("/api/personal/index", {
        uid: this.uid
      })
      .then((res) => {
        res.personalData.forEach((item) => {
          this.nickname = item.u_nick;
          if (item.usex == 1) {
            this.sex = '男';
          } else {
            this.sex = "女";
          }
          this.email = item.uemail;
          this.imageUrl = "http://test.com:3000/image/" + item.u_headers;
        });
      });
  },
};
</script>

<style lang="less" scoped>
@write: #fff;
@grey: #e6e6e6;
.box {
  position: relative;
  height: auto;
  background-color: #f3f3f3;
  h4 {
    display: flex;
    margin: 0;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    color: #fff;
    background-color: #000;
    border-bottom: 1px solid @grey;
    a {
      flex: 1;
      font-size: 1rem;
      line-height: 2rem;
    }
    span {
      flex: 8;
    }
  }
  .box_c {
    height: 90vh;
    background-color: #000;
    .profile {
      display: flex;
      height: 8rem;
      background-color: rgb(53, 52, 52);
      .nickname {
        color: @write;
        line-height: 3rem;
      }
      .profile_left {
        flex: 2;
        height: 4.3rem;
        margin: 1rem 1rem;
        border: 1px solid #ccc;
        img {
          width: 100%;
        }
      }
      .profile_right {
        flex: 7;
        margin: 1rem 1rem;
      }
    }
  }
  .box_list {
    p {
      height: 3rem;
      line-height: 3rem;
      padding: 0 0 0 2rem;
      color: #fff;
      font-size: .9rem;
      background-color: rgb(53,52,52);
    }
  }
  .buttom {
    & > a {
      display: block;
      margin: 1.5rem auto;
      text-align: center;
      width: 100%;
      height: 2.5rem;
      line-height: 2.5rem;
      color: #fff;
      background-color: rgb(53, 52, 52);
    }
  }
}
</style>